<template>
  <div>
    <el-form :inline="true">
      <el-form-item>
        <el-button type="primary"
                   icon="el-icon-plus" @click="handleAdd">
          添加专家
        </el-button>
      </el-form-item>
    </el-form>

    <el-table
      border
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="specialistName"
        label="名称">
      </el-table-column>
      <el-table-column
        prop="nationality"
        label="所属团队">
        <template slot-scope="{row}">
          <span> {{ row.teamList.toString() }} </span>
        </template>
      </el-table-column>
      <el-table-column
        prop="areaId"
        label="所属地区">
        <template slot-scope="{row}">
          <span> {{ diqu(row.areaId) }} </span>
        </template>
      </el-table-column>
      <el-table-column
        label="头像">
        <template slot-scope="{row}">
<!--          headPicture-->
          <el-avatar shape="square"
                     :size="100"
                     :src="row.headPicture" />
        </template>
      </el-table-column>
      <el-table-column
        label="操作">
        <template slot-scope="{row}">
<!--          <el-button-->
<!--            size="mini"-->
<!--            @click="view(row)">查看</el-button>-->
          <el-button
            size="mini"
            type="success"
            @click="update(row)">编辑</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="del(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      width="70%"
      @close="diaClose"
      :modal="false"
      style="z-index: 1"
      v-loading="loading"
      :visible.sync="dialogFormVisible">
      <el-form ref="ff" label-width="88px" :model="form">
        <el-form-item label="专家名称">
          <el-input v-model="form.specialistName" />
        </el-form-item>
        <el-form-item label="专家头像">
          <el-upload
            class="avatar-uploader"
            action="http://47.101.57.131:8101/common/api/file/upload2"
            :show-file-list="false"
            :on-success="handleAvatarSuccess">
            <img v-if="form.headPicture" :src="form.headPicture" class="avatar"  alt=""/>
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="所属团队">
          <el-select v-model="form.teamList" multiple placeholder="请选择">
            <el-option
              v-for="item in team"
              :key="item.dictCode"
              :label="item.dictLabel"
              :value="item.dictValue">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所属地区">
          <el-select v-model="form.areaId" placeholder="请选择">
            <el-option
              v-for="item in area"
              :key="item.dictCode"
              :label="item.dictLabel"
              :value="item.dictValue">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="专家详情">
          <tinymceComponent v-model="form.introduce" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submit">确 定</el-button>
      </div>
    </el-dialog>
    <el-pagination
      background
      :current-page="current"
      style="margin-top: 20px;"
      @current-change="currentChange"
      layout="prev, pager, next"
      :total="total">
    </el-pagination>
  </div>
</template>

<script>
import {getZhuanjia, delZhuanjia, addZhuanjia, upTeam, getTeam, getArea, upZhuanjia} from "@/api/team";
import {deepClone} from "@/utils";
import tinymceComponent from '@/components/tinymce'
export default {
  components:{
    tinymceComponent
  },
  data() {
    return {
      tableData:[],
      dialogFormVisible:false,
      total:0,
      loading:false,
      form:{
        "specialistName": "",
        "headPicture": "",
        "nationality": "",
        "areaId": "",
        "introduce": "",
        "fileId": 1,
        "teamList": []
      },
      bianji:false,
      current:1,
      team:[],
      area:[]
    }
  },
  created() {
    this.getList()
  },
  methods: {
    diqu(areaId){
      const value = this.area.filter(item => item.dictValue===areaId)[0]
      return areaId?value.dictLabel:null
    },
    getList(){
      getArea({
        current:1,
        size:10000,
      }).then(res=>{
        // console.log(res)
        this.area = res.data.records
      })
      getTeam({
        current:1,
        size:10000,
      }).then(res=>{
        // console.log(res)
        this.team = res.data.records
        getZhuanjia(this.current).then(res=>{
          console.log(res.data.records)
          res.data.records.forEach(it => {
            let nt = []
            it.teamList.forEach(i => {
              const v = this.team.filter(item => item.dictValue===i)
              nt = [...nt,...v]
            })
            it.teamList = nt.map(t => t.dictLabel)
          })
          console.log(res.data.records)
          this.tableData = res.data.records
          this.total = res.data.total
        })
      })
    },
    handleAdd(){
      this.bianji = false
      this.dialogFormVisible = true
    },
    del(row){
      console.log(row)
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await delZhuanjia({
          id:row.id,
          fileId:row.fileId
        })
        this.$message.success('操作成功')
        this.getList()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    currentChange(page){
      this.current = page
      this.getList()
    },
    async submit(){
      console.log(this.form)
      if (this.bianji){
        await upZhuanjia(this.form)
      }else {
        const res = await addZhuanjia(this.form)
        console.log(res)
      }
      this.dialogFormVisible = false
      this.getList()
      this.$message.success('操作成功')
    },
    update(row){
      this.bianji = true
      row.teamList = []
      this.form = deepClone(row)
      this.dialogFormVisible = true
    },
    view(){

    },
    handleAvatarSuccess(res){
      console.log(res)
      this.form.headPicture = res.data.fileUrl
      this.form.fileId = res.data.id
    },
    diaClose(){
      this.$refs.ff.resetFields()
      this.form = {
        introduce:""
      }
    },
  }
}
</script>
<style scoped>
>>>.el-dialog__wrapper{
  z-index: 999 !important;
}

</style>
